<template>
    <div>
        <!-- 用户信息列表 -->
        <el-container>
            <el-header class="header-all">
                <!-- 查询 -->
                <div style="display: inline;">
                    <el-select placeholder="请选择要查询类别" v-model="user.namecn">
                        <el-option  v-for="item in myNamecn" :key="item.namecn" :label="item.namecn" :value="item.namecn"></el-option>
                    
                    </el-select>
                    <el-select placeholder="动力类型" v-model="user.display">
                        <el-option  v-for="item in myDisplay" :key="item.display" :label="item.display" :value="item.display"></el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" class="btn-search" @click="search">搜索</el-button>
                </div>
                <!-- 功能 -->
                <div class="div-head-btn">
                    <el-button type="primary" plain @click="addEmp">新增</el-button>
                </div>
            </el-header>
            <el-main>
                <!-- 列表区域 -->
                <el-table :data="userList">
                    <el-table-column type="id" width="50px" prop="id"></el-table-column>
                    <el-table-column prop="code" width="160px" label="资产编号"></el-table-column>
                    <el-table-column prop="namecn" width="100px" label="产权类型"></el-table-column>
                    <el-table-column prop="parentname" width="160px" label="上级资产名称"></el-table-column>
                    <el-table-column prop="parentid" width="200px" label="上级资产编号"></el-table-column>
                    <el-table-column width="200px" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" plain @click="update(scope.row)">编辑</el-button>
                            <el-button type="danger" plain @click="del(scope.row)">删除</el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </el-main>

        </el-container>
        <el-form :model="user" class="form-dialog">
            <div class="form-div">
                <el-dialog :title="dialogTitie" :visible.sync="dialogVisible" class="form-div-dialog">
                    <el-row>
                        <el-col :span="4">
                            <div style="display: inline;">
                                <el-form-item label="资产编号">
                                    <el-input v-model="user.code" type="text" class="form-imput" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4" style="position: relative;left: 40%;">
                            <div style="display: inline;">
                                <el-form-item label="产权类型">
                                    <el-select v-model="user.namecn" style="width: 200px;">
                                        <el-option  v-for="item in myNamecn" :key="item.namecn" :label="item.namecn" :value="item.namecn"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <div style="display: inline;">
                                <el-form-item label="上级名称">
                                    <el-input v-model="user.parentname" type="text" class="form-imput"  placeholder="请输入年龄" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4" style="position: relative;left: 40%;">
                            <div style="display: inline;">
                                <el-form-item label="上级编号">
                                    <el-input v-model="user.parentid" type="text" maxlength="2" minlength="20" class="form-imput" placeholder="请输入身份证号" />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <span slot="footer">
                        <el-button type="primary" plain @click="cancel">取消</el-button>
                        <el-button type="primary" plain @click="save()">保存</el-button>

                    </span>
                </el-dialog>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'permanent',
    data() {
        return {
            myNamecn:"",
            myDisplay:"",
            userList: [
                ],
            dialogVisible: false,
            user: {
                "code": "",
                "namecn": "",
                "parentid":"",
                "parentname": "",
            },
            dialogTitie:"新增用户信息"
        }

    },
    created(){
        this.getJsonemployee();
        this.getJsonDisplay();
        this.getJsonDept();
    },
    methods: {
        getJsonemployee(){
            var url = "http://121.37.241.58:8883/logic/baseInfo/category/list/3";
            this.$axios.get(url).then(re=>{
                this.userList=re.data
            })
        },
        getJsonDisplay(){
            var url = "http://121.37.241.58:8883/logic/baseInfo/sysDict/equityType";
            this.$axios.get(url).then(re=>{
                this.myDisplay=re.data;
                this.myDisplay.push({"display":"全部"})
            })

        },
        getJsonDept(){
            var url = "http://121.37.241.58:8883/logic/baseInfo/category/list/3";
            this.$axios.get(url).then(re=>{
                this.myNamecn=re.data;
                this.myNamecn.push({"namecn":"全部"})
            })

        },
        search() {
            console.log("已经进入查询方法页面");
            console.log(this.user.namecn);
            var url = "http://121.37.241.58:8883/logic/baseInfo/category/list/3";
            if(this.user.namecn!="全部"){
                url = "http://121.37.241.58:8883/logic/baseInfo/category/list/3?namecn="+this.user.namecn;
            }
            this.$axios.get(url).then(re=>{
                this.userList=re.data

            })

        },
        addEmp() {
            console.log("已经进入添加人员信息方法页面");
            this.user.code=""
            this.user.namecn=""
            this.user.parentid=""
            this.user.parentname=""
            this.dialogVisible = true
        },
        update(User) {
            console.log("已经进入修改人员信息方法页面");
            console.log(User.namecn)
            this.user=User
            this.dialogTitie="修改用户信息"
            this.dialogVisible = true
        },
        del(User) {
            console.log("已经进入删除人员信息方法页面");
            console.log("要删除的编号"+User.code)
            var index = this.userList.findIndex(item=>{
                console.log(item.code+"====="+item.namecn)
                if(item.code==User.code){
                    return index
                }
            })
            this.userList.splice(index,1)
        },
        cancel() {
            console.log("已经进入取消人员信息方法页面");

            this.dialogVisible = false

        },
        save() {
            console.log("已经进入保存人员信息方法页面");

            this.dialogVisible = false;
            if(this.user.empno==""){
                console.log("进入保存当中新增方法")
                console.log("获取表单当中的姓名"+this.user.namecn)
                var num = this.userList.length+1
                this.user.code=num;
                this.userList.push(this.user)
            }else{
                console.log("进入修改当中新增方法")
                
            }
        }
    }
}
</script>
<style>
.input-name {
    width: 300px;
    margin: 0px;
    padding: 0px;
    size: mini;
}

.btn-search {
    margin-left: 5px;
    size: mini;

}

.div-head-btn {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;

}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-dialog {
    margin: 0px;
    padding: 0px;

}

.form-imput {
    width: 200px;
    height: 20px;
    size: mini;
}

.form-div {
    text-align: left;
}

.form-div-dialog {
    padding: 0px;
    width: 80%;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>